<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="card-container">
      <div class="cover">COVER</div>
      <div class="back">BACK</div>
    </div>

    <div class="card-container">
      <div class="cover">COVER</div>
      <div class="back">BACK</div>
    </div>

    <div class="card-container">
      <div class="cover">COVER</div>
      <div class="back">BACK</div>
    </div>

    <style>
      html {
        font-size: 22px;
      }

      body {
        height: 100vh;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-family: Helvetica, Arial;
        background-image: radial-gradient(
          circle 506px at 50.6% 16.5%,
          rgba(239, 252, 250, 1) 5.5%,
          rgba(154, 192, 206, 1) 100.2%
        );
      }

      .card-container {
        width: 300px;
        height: 400px;
        position: relative;
        perspective: 1000px;
      }

      .cover,
      .back {
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: transform 0.25s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        border-radius: 0.4rem;
        box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.18);
        text-shadow: 0 0.15rem 0.2rem rgba(0, 0, 0, 0.2);
      }
      .cover {
        background-color: blue;
        transform: rotatey(0deg);
        background-image: radial-gradient(
          circle 484px at 49.4% 19%,
          rgba(23, 156, 214, 1) 0%,
          rgba(52, 48, 111, 1) 100.2%
        );
        color: #fff;
      }
      .card-container:hover .cover {
        transform: rotatey(180deg);
      }
      .back {
        background-color: yellow;
        transform: rotatey(-180deg);
        background-image: radial-gradient(
          circle farthest-corner at 10% 20%,
          rgba(255, 171, 0, 1) 0%,
          rgba(255, 139, 0, 1) 90.1%
        );
      }
      .card-container:hover .back {
        transform: rotatey(0deg);
      }
    </style>
  </body>
</html>
